<template>
  <div>
    <a-button type="primary" v-auth="'erp.basic:erp_bill_class_code:save'" @click="handleAdd" preIcon="ant-design:plus-outlined">保存</a-button>
    <a-button type="primary" v-auth="'erp.basic:erp_bill_class_code:remove'" @click="handleAdd" preIcon="ant-design:plus-outlined">删除</a-button>
    <JVxeTable
      ref="tableRef"
      stripe
      rowNumber
      rowSelection
      rowExpand
      resizable
      asyncRemove
      clickSelectRow
      :height="480"
      :checkboxConfig="{ range: true }"
      :disabledRows="{ input: ['text--16', 'text--18'] }"
      :loading="loading"
      :disabled="disabled"
      :columns="columns"
      :dataSource="dataSource"
      :custom="true"
    >
      <template #toolbarSuffix>
        <!-- <a-button @click="handleTableCheck">表单验证</a-button>
        <a-tooltip placement="top" title="获取值，忽略表单验证" :autoAdjustOverflow="true">
          <a-button @click="onGetData">获取数据</a-button>
        </a-tooltip>
        <a-tooltip placement="top" title="模拟加载1000条数据" :autoAdjustOverflow="true">
          <a-button @click="handleTableSet">设置值</a-button>
        </a-tooltip>
        <a-button @click="onGetSelData">获取选中数据</a-button>
        <a-button @click="onClearSel">清空选中</a-button>
        <a-button @click="onDelFirst">删除第一行数据</a-button>
        <a-button @click="onDelSel">删除选中数据</a-button> -->
      </template>

      <template #expandContent="props">
        <div style="padding: 20px">
          <span>Hello! My name is: {{ props.row.input }}!</span>
        </div>
      </template>

      <template #myAction="props">
        <a @click="onLookRow(props)">查看</a>
        <a-divider type="vertical" />
        <Popconfirm title="确定删除吗？" @confirm="onDeleteRow(props)">
          <a>删除</a>
        </Popconfirm>
      </template>
    </JVxeTable>
  </div>
</template>

<script lang="ts" setup>
  import {ref,onMounted, reactive, computed, unref} from 'vue';
  import { JVxeTypes, JVxeColumn, JVxeTableInstance } from '/@/components/jeecg/JVxeTable/types';
  import {getList} from './ErpBillClassRule.api';
  import { useMessage } from '/@/hooks/web/useMessage';
  const loading = ref(false);
  const disabled = ref(false);
  const billClassName = ref('ErpBillClassRule');
  const tableRef = ref<JVxeTableInstance>();
  const dataSource = ref<any[]>([]);

  const columns = ref<JVxeColumn[]>([
    {
      title: '流水号',
      key: 'id',
      type: JVxeTypes.hidden,
    },
    {
      title: '单据类型名称',
      key: 'noEdit',
      type: JVxeTypes.normal,
    },
    {
      title: '操作',
      key: 'action',
      type: JVxeTypes.slot,
      fixed: 'right',
      minWidth: 120,
      align: 'center',
      slotName: 'myAction',
    },
  ]);

  onMounted(()=>{
    //初始化数据
    getBillClassRule()
  });


  async function onDeleteRow(props) {
    // 异步调用删除方法
    const res = await tableRef.value?.removeRows(props.row, true);
    console.log('删除成功~', res);
  }

  function onLookRow(props) {
    // createMessage.success('请在控制台查看输出');
    // 参数介绍：
    // props.value          当前单元格的值
    // props.row            当前行的数据
    // props.rowId          当前行ID
    // props.rowIndex       当前行下标
    // props.column         当前列的配置
    // props.columnIndex    当前列下标
    // props.$table         vxe实例，可以调用vxe内置方法
    // props.target         JVXE实例，可以调用JVXE内置方法
    // props.caseId         JVXE实例唯一ID
    // props.scrolling      是否正在滚动
    // props.triggerChange  触发change事件，用于更改slot的值
    console.log('查看: ', { props });
  }


  function getBillClassRule(){
    console.log('进来请求数据了')
    let params = {}
    getList(params).then((res)=>{
      console.log(res)
    })
  }

  function handleAdd(){

  }



</script>

<style lang="less" scoped>
  :deep(.ant-picker),:deep(.ant-input-number){
    width: 100%;
  }
</style>